<template lang="">
    <div>
        <headers></headers>
        <div class="detail">

            <div class="top">
                <div class="left">
                    <div class="show">
                        <div class="info">
                            <div class="user">
                                <strong><span style="font-size: 16px;color:#795ab5;">#{{idleItem.tag}}#</span> {{idleItem.itemsName}}</strong>
                                <span><i class="el-icon-tickets"></i>：{{idleItem.itemsDesc}}</span>
                                <span><i class="el-icon-time"></i>：{{idleItem.issueTime}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="swipper">
                        <img v-for="item in idleItem.plist" :src="item" alt="">
                    </div>

                </div>

                <div class="right">
                    <div class="score">
                        <span><i class="el-icon-star-on" />热度：{{idleItem.hot}}</span>
                        <span><i class="el-icon-thumb" />浏览：{{idleItem.glanceCnt}}</span>
                    </div>
                    <div class="price">
                        <strong
                            style="font-size: 20px;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"></strong>
                            <span>￥{{idleItem.expectPrice}}</span>
                            <span class="span">原价￥{{idleItem.expectPrice+100}}</span>
                    </div>
                    <div class="discount">
                        <el-button id="btn1">立刻购买</el-button>
                    </div>
                    <div class="info_title" style="height: 60px;">
                        <div class="l">
                            <img style="width: 60px;height: 60px;border-radius: 30px;" :src="idleItem.owner.picture" alt="">
                        </div>
                        <div class="r">
                            <div  style="line-height: 30px;">{{idleItem.owner.username}}</div>
                            <div class="chat" style="line-height: 30px;"><i style="color:green;font-size: 20px;" class="el-icon-chat-line-round"></i>聊一聊</div>                            
                        </div>
                    </div>
                </div>
            </div>

            <div class="comment">
                <div class="header">
                    <span>评论({{param.total}})</span>
                    <div class="r">
                        <el-input v-model="form.content" placeholder="请输入内容"></el-input>
                        <el-button size="mini" @click="issueComment">留言</el-button>
                    </div>
                </div>
                <hr>

                <div class="list" v-for="(item, index) in commentList" :key="index">
                    <div class="user">
                        <div class="le">
                            <img :src="item.speaker.picture" alt="">
                            <strong class="name">{{item.speaker.username}}</strong>
                        </div>
                        <span>{{item.time}}</span>
                    </div>
                    <div class="content">{{item.content}}</div>
                    <div class="foot">
                        <div class="sender">
                            <span @click="addLikeCnt(item)"><img v-if="item.like==false" src="@/assets/images/svg/like.svg" alt=""><img v-if="item.like==true" src="@/assets/images/svg/liked.svg" alt=""></img> {{item.likeCnt}}</span>
                        </div>
                        <!-- <div class="btn">
                            <el-button @click="reply(item)">回复</el-button>
                        </div> -->
                    </div>

                    <div v-if="isShow" class="reply">
                        <el-input v-model="replyForm.content" placeholder="请输入内容"></el-input>
                        <el-button @click="replyComment">确定</el-button>
                    </div>
                </div>
                <el-pagination  background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="param.current" :page-size="param.size"
                    layout="prev, pager, next" :total="param.total">
                </el-pagination>
            </div>
        </div>
        <footers></footers>
    </div>
</template>
<script>
import { getDetails } from "../../utils/idle.js";
import { comment,getComment,addLike } from "../../utils/comment.js";
    export default {
        data() {
            return {
                idleItem: {
                    owner:{}
                },
                params: {
                    userId: "",
                    token: "",
                },
                param:{
                    id: '',
                    type: "二手交易",
                    current:1,
                    size:5,
                    total:0
                },
                form: {
                    cardId: '',
                    content: "",
                    issueId: '',
                    fatherId: 0,
                    type: "二手交易"
                },
                replyForm: {
                    cardId: '',
                    content: "",
                    issueId: '',
                    fatherId: '',
                    type: "二手交易"
                },
                isShow: false,
                commentList: []
            }
        },
        created() {
            this.param.id = this.$route.query.id;
            this.form.cardId = this.$route.query.id;
            this.replyForm.cardId = this.$route.query.id;
            this.params.userId = localStorage.getItem("user");
            this.form.issueId = localStorage.getItem("user");
            this.replyForm.issueId = localStorage.getItem("user");
            this.params.token = this.$cookies.get("token");
            this.getIdle();
            this.getCommentList();
        },
        methods: {
            handleSizeChange(val) {
                this.param.size=val;
                this.getCommentList();
            },
            handleCurrentChange(val) {
                this.param.current=val;
                this.getCommentList();
            },
            getIdle(){
                getDetails(this.param,this.params).then(res=>{
                    if(res.data.code==200){
                        this.idleItem = res.data.data;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
            },
            //评论
            issueComment(){
                if(this.form.content.length > 0){
                
                    comment(this.form,this.params).then(res=>{
                        if(res.data.code==200){
                            this.$message.success(res.data.msg);
                            this.form.content='';
                            this.getCommentList();
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    })                    
                }else{
                    this.$message.error("输入为空");
                }

            },
            //回复
            // reply(item) {
            //     this.isShow = true; 
            //     this.replyForm.fatherId= item.id;
            // },
            //回复评论
            // replyComment(){
            //     comment(this.replyForm,this.params).then(res=>{
            //         if(res.data.code==200){
            //             this.$message.success(res.data.msg);
            //             this.replyForm.content='';
            //             this.isShow = false;
            //             this.getCommentList();
            //         }else{
            //             this.$message.error(res.data.msg);
            //         }
            //     })
            // },

            //查询评论
            getCommentList(){
                getComment(this.param,this.params).then(res=>{
                    
                    if(res.data.code==200){
                         this.commentList = res.data.data.records;
                         this.param.current = res.data.data.current;
                         this.param.size = res.data.data.size;
                         this.param.total = res.data.data.total;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
            },
            //点赞
            addLikeCnt(item){
                item.like = !item.like;
                addLike(item,this.params).then(res=>{
                    if(res.data.code==200){
                       item.likeCnt += res.data.data;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
            }
        },
    }
</script>
<style lang="less" scoped>
    @import url('./index.less');
</style>